<template>
  <div class="page-main">
    <query-page
      :key="activeTab"
      v-model:selectedKeys="selectedKeys"
      :form-component-config="formComponentConfig"
      :form-render-config="formRenderConfig"
      :form-render-keys="formRenderKeys"
      :table-component-config="tableComponentConfig"
      :table-render-config="tableRenderConfig"
      :table-render-keys="tableRenderKeys"
      :loading="isLoading"
      :data="renderData"
      title="询报价单查询"
      :has-line="false"
      :total="total"
      row-selection-type="checkbox"
      @query-data="getData"
    >
      <template #top-container>
        <p-tabs
          v-model:value="activeTab"
          :is-show-num="true"
          :tab-list="tabList"
        ></p-tabs>
      </template>
      <template #operate="{ record }">
        <a-button
          v-permission="[
            'procurement:quote-item:selectQuoteItemListByPage',
            'procurement:inquiry-item:pageByInquiryNo',
          ]"
          type="text"
          @click="detail(record, 'item')"
          >详情</a-button
        >
      </template>
    </query-page>
    <contentModel
      v-if="detailFlag"
      class="detail-sheet-modal"
      :has-footer="false"
      :title="activeTab === '1' ? '询价单详情' : '报价单详情'"
      @close="close"
    >
      <div class="page-con" :class="screenClass">
        <table-container
          v-model:columns="columns"
          v-model:is-fullscreen="isFullscreen"
          :loading="isLoading2"
          :all-columns="allColumns"
          @refresh="getData2"
        >
          <standard-table
            ref="tableRef"
            v-model:selectedKeys="selectedKeys2"
            :component-config="tableComponentConfig"
            :render-config="tableRenderConfig"
            :render-keys="tableRenderKeys2"
            :loading="isLoading2"
            :data="renderData2"
            :total="total1"
            row-selection-type="checkbox"
            :columns="columns"
            @init-columns-end="initColumns"
          >
          </standard-table>
        </table-container>
      </div>
    </contentModel>
  </div>
</template>

<script lang="ts" setup>
  import { ref, onMounted, watch, defineAsyncComponent } from 'vue';
  // import { Message } from '@arco-design/web-vue';
  import queryPage from '@/common/components/query-page/index.vue';
  import StandardTable from '@/common/components/standard-table/index.vue';
  import lodash from 'lodash';
  import {
    planList,
    itemList,
    selectQuoteByPage,
    selectQuoteItemByPage,
  } from '@/api/supplier/inquiry-sheet';
  import useFullScreen from '@/common/hooks/fullScreen';
  import tableContainer from '@/common/components/table-container/index.vue';
  import { ObjKey } from '@/config/const';
  import {
    formRenderConfig,
    formComponentConfig,
  } from './components/formComp/baseFormConfig';
  import {
    tableRenderConfig,
    tableComponentConfig,
  } from './components/tableComp/baseTableConfig';
  import { baseRenderKeys } from './components/baseDatasheet';
  import PTabs from './components/p-tabs.vue';

  const contentModel = defineAsyncComponent(
    () => import('@/common/components/content-model/index.vue')
  );
  const total = ref(0);
  const total1 = ref(0);
  const tableRef = ref();
  const detailFlag = ref(false);
  const selectRow: any = ref({});
  const { isFullscreen, screenClass } = useFullScreen();
  const selectedKeys = ref([]);
  const selectedKeys2 = ref([]);
  const activeTab = ref('');
  const activeRadio = ref('');
  const isLoading = ref(true);
  const isLoading2 = ref(true);
  const renderData = ref<any[]>([]);
  const renderData2 = ref<any[]>([]);
  const tabList = ref([
    { label: '询价单查询', key: '1', id: '1' },
    { label: '报价单查询', key: '2', id: '2' },
  ]);
  // 渲染检索项
  const formRenderKeys = ref<any[]>([]);
  const tableRenderKeys = ref<any[]>([]);
  const tableRenderKeys2 = ref<any[]>([]);
  const columns = ref<object[]>([]);
  const allColumns = ref<object[]>([]);

  const getData = async (queryInfo: any) => {
    renderData.value = [];
    renderData2.value = [];
    isLoading.value = true;
    if (queryInfo.queryDate?.length > 0) {
      queryInfo.startQueryDate = queryInfo?.queryDate[0];
      queryInfo.endQueryDate = queryInfo?.queryDate[1];
      delete queryInfo.queryDate;
    }
    const res: any =
      activeTab.value === '1'
        ? await planList(queryInfo)
        : await selectQuoteByPage(queryInfo);
    if (res.code === 200) {
      renderData.value = res.data?.list;
      total.value = res.data?.total;
    }
    isLoading.value = false;
  };
  const getData2 = async (queryInfo: object) => {
    detail(queryInfo, 'get');
  };
  const initData = async () => {
    const tabConfig: ObjKey = {
      '1': 'inquirysheet',
      '2': 'quotationquery',
    };
    formRenderKeys.value =
      baseRenderKeys[tabConfig[activeTab.value]].formRenderKeys;
    tableRenderKeys.value =
      baseRenderKeys[tabConfig[activeTab.value]].newTableRenderKeys;
    tableRenderKeys2.value =
      baseRenderKeys[tabConfig[activeTab.value]].cmTableRenderKeys;
  };
  const detail = async (record: any, type: string) => {
    renderData2.value = [];

    let res: any = {};
    let params: any = {};
    let query: any = {};
    if (detailFlag.value) {
      query = tableRef.value.getStatus();
    }
    interface Param {
      inquiryNo?: string;
      pmsQuoteId?: string;
    }
    if (type === 'item') {
      const param: Param = {
        inquiryNo: record.inquiryNo,
        pmsQuoteId: record.id,
      };
      selectRow.value = record;
      params = { ...param, ...query };
    } else {
      const param1: Param = {
        inquiryNo: selectRow.value.inquiryNo,
        pmsQuoteId: selectRow.value.id,
      };
      params = { ...query, ...param1 };
    }
    if (activeTab.value === '1') {
      delete params.pmsQuoteId;
      res = (await itemList(params)) as any;
    } else {
      delete params.inquiryNo;
      res = (await selectQuoteItemByPage(params)) as any;
    }
    if (res.code === 200) {
      setTimeout(() => {
        renderData2.value = res.data?.list;
        total1.value = res.data?.total;
      }, 500);
    }
    isLoading2.value = false;
    detailFlag.value = true;
  };
  const close = () => {
    detailFlag.value = false;
  };
  const initColumns = (data: any[]) => {
    columns.value = lodash.cloneDeep(data);
    allColumns.value = lodash.cloneDeep(data);
  };

  watch(activeTab, () => {
    initData();
  });

  watch(activeRadio, () => {
    initData();
  });

  onMounted(() => {
    activeTab.value = '1';
    initData();
  });
</script>

<style lang="less" scoped>
  .radio-ara {
    display: flex;
    justify-content: space-between;
    width: 17.5%;
  }
</style>

<style lang="less">
  .detail-sheet-modal {
    .page-con {
      padding: 0 !important;

      .header-con {
        padding-top: 0 !important;
      }

      .table-container-con {
        padding-top: 0 !important;
      }
    }
  }
</style>
